<template>
  <div class="trend" :style="{ color: textColor }">
    <!-- 通过v-if -else 使 slot 与 组件传值共存,但同时只有一个生效 -->
    <!-- 2.插槽 -->
    <!-- 使用: <hf-trend >  营业额 </hf-trend> -->
    <!-- 匿名插槽 default -->
    <slot v-if="slots.default"></slot>
    <!-- 插槽名 text -->
    <!-- 使用: <hf-trend > <template #text>插槽 text</template> </hf-trend> -->
    <slot name="text" v-else-if="slots.text"></slot>

    <!-- 1.父组件传值 -->
    <div v-else>{{ text }}</div>

    <!-- 图标 -->
    <!-- <div class="icon">
      <el-icon-arrowup :style="{ color: !reverseColor ? upIconColor : '#52c41a' }" v-if="type === 'up'" />
      <el-icon-arrowdown :style="{ color: !reverseColor ? downIconColor : '#f5222d' }" v-else />
    </div> -->

    <!-- 自定义图标 -->
    <div class="icon">
      <component :is="`el-icon-${upIcon.replace(/(A-Z)g/, '-$1').toLocaleLowerCase()}`" :style="{ color: !reverseColor ? upIconColor : '#52c41a' }" v-if="type === 'up'" />
      <component :is="`el-icon-${downIcon.replace(/(A-Z)g/, '-$1').toLocaleLowerCase()}`" :style="{ color: !reverseColor ? downIconColor : '#f5222d' }" v-else />
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, useSlots } from 'vue'

// 插槽取文字
let slots = useSlots()

// 自定义文字颜色
let textColor = computed(() => {
  return props.type === 'up' ? props.upTextColor : props.downTextColor
})

let props = defineProps({
  // 标记类型 up down
  type: {
    type: String,
    default: 'up',
  },
  // 文本
  // 1. 父组件传参
  // 2. 插槽
  text: {
    type: String,
    default: '文字',
  },
  // 图标颜色
  upIconColor: {
    type: String,
    default: '#f5222d',
  },
  downIconColor: {
    type: String,
    default: '#52c41a',
  },
  // 颜色反转,只支持默认颜色
  reverseColor: {
    type: Boolean,
    default: false,
  },
  // 文字颜色 -up
  upTextColor: {
    type: String,
    default: 'black',
  },
  // 文字颜色 -down
  downTextColor: {
    type: String,
    default: 'black',
  },
  // 自定义图标
  upIcon: {
    type: String,
    default: 'ArrowUp',
  },
  downIcon: {
    type: String,
    default: 'ArrowDown',
  },
})
</script>

<style scoped lang="less">
.trend {
  display: flex;
  align-items: center;
  font-size: 14px;
  margin-right: 2px;
  .icon {
    svg {
      width: 0.8em;
      height: 0.8em;
    }
  }
}
</style>
